<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
    }

    .container {
        display: flex;
        justify-content: center;
        /* 左右居中 */
        align-items: center;
        /* 上下居中 */
        min-height: 100vh;
        background-color: rgb(0, 0, 0);
        flex-direction: column;
        /* 上下排列 */
        filter: contrast(3000%);
        /* 调整图像的对比度。
        0％ 将使图像完全变黑。
        默认值是 100％，代表原始图像。
        超过 100％ 的值将提供更具对比度的结果。 */
    }

    .drop {
        width: 100px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        border-radius: 50%;
        position: absolute;
        filter: blur(20px);
        opacity: 0;
        /* 透明度级别 */
        animation: 2.5s drop linear infinite;
        /* 时间  对象 速度 连续  */
    }

    .drop:nth-child(2) {
        animation-delay: .5s;
        /* 动画延迟 */
    }

    .drop:nth-child(3) {
        animation-delay: .7s;
    }

    .collection {
        width: 100px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        border-radius: 50%;
        filter: blur(20px);
        animation: 3s collection linear infinite;
    }

    span {
        position: absolute;
        font-size: 30px;

    }

    @keyframes drop {
        0% {
            transform: scale(.7) translateY(-600%);
            opacity: 0;
        }

        50% {
            transform: scale(.4) translateY(-80%);
            opacity: 1;
        }

        100% {
            transform: scale(.3) translateY(0px);
        }
    }

    @keyframes collection {
        0% {
            transform: scale(1) rotate(0deg);
        }

        50% {
            transform: scale(1.3) rotate(180deg);
            width: 90px;
            border-top-left-radius: 50%; 
            border-bottom-left-radius: 50%;
        }

        100% {
            transform: scale(1) rotate(360deg);
        }
    }
</style>

<body>
    <div class="container">
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>

        <div class="collection"></div>
        <span>99%</span>
    </div>
</body>

</html>